<template>
	<view>

        <button @click="open()">我要提问</button>
        <uni-popup ref="popup" type="center">
            <view class="content">
                <view @click="close()" class="shut"></view>

                <view class="title">
                    <h2>我要提问</h2>
                </view>

                <view class="text">
                    <textarea placeholder="写下问题, 将有专业咨询师为您解答" rows="10" cols="30"> </textarea>
                </view>
                       
                <view class="phone">
                    <input  type="text" placeholder="请输入订阅手机号">
                </view>

                <button @click="expert()" class="btn-area" >确定</button>

            </view>   
        </uni-popup> 

        <uni-popup ref="message" type="center">
            <view class="expert2-popup">
                <p class="expert2-popup-p">请输入正确格式的手机号</p>
                <p @click="close1()" class="expert2-popup-shut">取消</p>
            </view>
        </uni-popup>

      
        
	</view>
</template>


<script>
    import uniPopup from '@/components/uni-popup/uni-popup.vue'
    import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
    import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
        components: {
            uniPopup,
            uniPopupMessage,
            uniPopupDialog,
        },

		data() {
            
			return {
				
			}
		},
		methods: {

			open(){
                this.$refs.popup.open()
            },
            close(){
                 this.$refs.popup.close()
            },
            expert(){
                this.$refs.message.open()
            },
            close1(){
                this.$refs.message.close()
            }
		}
	}
</script>

<style scoped>
    .shut{
        height: 32upx;
        width: 32upx;
        position: relative;
        top:30upx;
        left: 580upx;
        /* background: url("../../static/img00/shut.png") no-repeat; */
        background-size: 100% 100%;
    }

    button{
        height: 86upx;
        width: 300upx;
        background-color: #13c3c3;
        border-radius: 10upx;
        color: #fff;
    }

    .content{
        background: #fff;
        border-radius: 10upx;
        padding-bottom: 80upx;
    }

    .title{
        padding-top: 60upx;
        text-align: center;
    }
    .text{
        background: #f3f6f9;
        margin-top: 30upx;
        margin-left: 10%;
        margin-right: 10%;
        border-radius: 10upx;
    }
    textarea{
        padding: 20upx;
        font-size: 28upx;
    }

    .phone{
        background: #f3f6f9;
        margin-top: 30upx;
        margin-left: 10%;
        margin-right: 10%;
        border-radius: 10upx;
    }
    .phone>input{
        padding: 0 20upx;
        height: 86upx;
        
    }

    .btn-area{
        width: 80%;
        margin-top:50upx;
        background: #13c3c3;
        color: #fff;
    }

 .expert2-popup{
        width: 510upx;
        height: 240upx;
        background: #fff;
        border-radius: 10upx;
    }
    .expert2-popup-p{
        height: 150upx;
        text-align: center;
        font-size: 28uxp;
        color: #3e4a59;
        line-height: 150upx;
        border-bottom: 1upx solid rgb(195, 195, 195);
    }
    .expert2-popup-shut{
        text-align: center;
        line-height: 90upx;
        color: #47b3e3;
    }
</style>
